<template>
  <div>
    <myDivider name="入住审批"></myDivider>
    <el-tabs v-model="activeType" @tab-click="handleClick">
      <el-tab-pane label="待审批" name="0"></el-tab-pane>
      <el-tab-pane label="已通过" name="1"></el-tab-pane>
      <el-tab-pane label="已驳回" name="2"></el-tab-pane>
      <!-- <el-tab-pane label="取消申请" name="3"></el-tab-pane> -->
      <el-tab-pane label="业主邀请" name="4"></el-tab-pane>
    </el-tabs>
    <div class="Top">
      <el-input style="width: 160px;margin-left: 10px;" v-model="keyAccount" placeholder="根据账号搜索"
        @keyup.enter.native="SouSuo" clearable></el-input>
      <el-input style="width: 160px" v-model="keyName" placeholder="根据用户姓名搜索" @keyup.enter.native="SouSuo"
        clearable></el-input>
      <el-input style="width: 160px" v-model="keyRoomName" placeholder="根据小区名称索" @keyup.enter.native="SouSuo"
        clearable></el-input>
      <el-button type="primary" style="margin-top: 20px; margin-left: 15px" @click="SouSuo">查询</el-button>
      <el-button style="margin-top: 20px; margin-left: 15px" @click="reset">重置</el-button>
    </div>

    <div>
      <el-table :data="tableData" style="width: 100%;margin-top: 20px;">
        <el-table-column label="用户账号" width="120px" align="center" prop="account"></el-table-column>
        <el-table-column label="姓名" width="150px" align="center" prop="userName"></el-table-column>
        <el-table-column label="身份证号" width="250px" align="center" prop="idNumber"></el-table-column>
        <el-table-column label="性别" width="60px" align="center" prop="gender">
          <template slot-scope="scope">
            {{ scope.row.gender == 0 ? '女' : '男' }}
          </template>
        </el-table-column>
        <el-table-column label="用户类型" width="100px" align="center" prop="customerType">
          <template slot-scope="scope">
            {{ scope.row.customerType == 1 ? '业主' : scope.row.customerType == 2 ? '亲友' : '租户' }}
          </template>
        </el-table-column>
        <el-table-column label="绑定小区房间" align="center" prop="fullName" width="200px">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.fullName" placement="top-start">
              <span>{{ scope.row.fullName == null || scope.row.fullName == '' ? '—' :
                scope.row.fullName.length > 7 ?
                  "..." + scope.row.fullName.substring(scope.row.fullName.length - 7,
                    scope.row.fullName.length) : scope.row.fullName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- 审批通过 / 审批驳回-->

        <el-table-column v-if="activeType != '4'" label="申请时间" align="center" prop="createTime">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column v-if="activeType == '2'" label="驳回原因" width="150px" align="center" prop="rejectReason">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.rejectReason" placement="top-start">
              <span>{{ scope.row.rejectReason == null || scope.row.rejectReason == '' ? '—' :
                scope.row.rejectReason.length > 7 ?
                  "..." + scope.row.rejectReason.substring(scope.row.rejectReason.length - 7,
                    scope.row.rejectReason.length) : scope.row.rejectReason }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column v-if="activeType == '1' || activeType == '2'" label="处理人" width="170px" align="center"
          prop="approverName">
        </el-table-column>
        <el-table-column v-if="activeType == '1' || activeType == '2'" label="处理时间" width="170px" align="center"
          prop="approvalTime">
        </el-table-column>

        <!-- 业主邀请 -->
        <el-table-column v-if="activeType == '4'" label="加入时间" width="170px" align="center" prop="approvalTime">
          <template slot-scope="scope">
            {{ scope.row.approvalTime }}
          </template>
        </el-table-column>
        <el-table-column v-if="activeType == '4'" label="邀请业主姓名" width="170px" align="center" prop="approverName">
        </el-table-column>
        <el-table-column v-if="activeType == '4'" label="手机号" width="170px" align="center" prop="inviterPhone">
        </el-table-column>


        <el-table-column label="操作" width="240px" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="applyFor(scope.row)">申请信息</span>
                </el-col>
                <el-col v-if="activeType == '0' || activeType == '4'" class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="member(scope.row)">房屋成员</span>
                </el-col>
                <el-col v-if="activeType == '0' && scope.row.isApprover" class="el" :span="4">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="agreeWith(scope.row)">同意</span>
                </el-col>
                <el-col v-if="activeType == '0'&& scope.row.isApprover" class="el" :span="4">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="reject(scope.row)">驳回</span>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- 分页器 -->
    <myPagination :total="total" :pageNum="pageNum" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>


    <!-- 申请信息弹窗 -->
    <el-dialog class="dialogStyle" width="600px" title="申请信息" :visible.sync="popInformationShow">
      <el-divider></el-divider>
      <el-form style="margin: 40px auto;width: 450px;" :model="informationForm" label-width="110px">
        <el-form-item label="姓名：">
          <el-input size="medium" disabled v-model="informationForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input size="medium" disabled v-model="informationForm.account"></el-input>
        </el-form-item>
        <el-form-item label="证件类型：">
          <el-select style="width: 340px;" size="medium" disabled v-model="informationForm.id_card_type"
            placeholder="请选择">
            <el-option label="居民身份证" value="1"></el-option>
            <el-option label="护照" value="2"></el-option>
            <el-option label="港澳台居民居住证" value="3"></el-option>
            <el-option label="外国人留居证" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号：">
          <el-input size="medium" disabled v-model="informationForm.id_number"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-select style="width: 340px;" size="medium" disabled v-model="informationForm.gender" placeholder="请选择">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期：">
          <el-date-picker style="width: 340px;" size="medium" disabled v-model="informationForm.birthday" type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="民族：">
          <!-- <el-select style="width: 340px;" size="medium" disabled v-model="informationForm.nation" placeholder="请选择">
            <el-option v-for="item in nationOptionData" :key="item.id" :label="item.name" :value="item.value">
            </el-option>
          </el-select> -->
          <el-input style="width: 340px;" size="medium" disabled v-model="informationForm.nationName"></el-input>
        </el-form-item>
        <el-form-item label="人脸信息：">
          <div v-if="informationForm.personal_photo"
            style="width: 80px;height: 80px;border: 1px solid #aaa;border-radius: 1000px;overflow: hidden;">
            <el-image style="width: 100%; height: 100%" :src="informationForm.personal_photo"
              :preview-src-list="[informationForm.personal_photo]">
            </el-image>
          </div>
          <span v-else style="color: #aaa;">无人脸信息</span>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
    </el-dialog>
    <!-- 房屋成员 -->
    <el-dialog class="dialogStyle" width="500px" title="房屋成员" :visible.sync="popMemberShow">
      <el-divider></el-divider>
      <el-table :highlight-current-row="false" :data="popMemberData" height="250px"
        style="width: 100%;margin-top: 20px;">
        <el-table-column label="姓名" width="150px" align="center" prop="name"></el-table-column>
        <el-table-column label="手机号码" align="center" prop="account"></el-table-column>
        <el-table-column label="用户类型" width="100px" align="center" prop="customer_type">
          <template slot-scope="scope">
            {{ scope.row.customer_type == 1 ? '业主' : scope.row.customer_type == 2 ? '亲友' : '租户' }}
          </template>
        </el-table-column>
      </el-table>
      <el-divider></el-divider>
    </el-dialog>

    <!-- 驳回申请 -->
    <el-dialog class="dialogStyle" width="500px" title="驳回申请" :visible.sync="popRejectShow">
      <el-divider></el-divider>
      <el-form style="margin: 40px auto;width: 450px;" ref="popReject" :model="popRejectForm" :rules="popRejectRules"
        label-width="110px">
        <el-form-item label="驳回原因：" prop="desc">
          <el-input type="textarea" v-model="popRejectForm.desc" show-word-limit maxlength="200"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" style="display: flex;justify-content: space-evenly;align-items: center;height: 60px;">
        <el-button @click="popRejectShow = false">取 消</el-button>
        <el-button type="primary" @click="rejectOk">确
          定</el-button>
      </div>
      <el-divider></el-divider>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nationOptionData: [],
      activeType: '0',
      // 表格筛选条件================
      keyAccount: '',
      keyName: '',
      keyRoomName: '',
      // ====================表格筛选条件
      tableData: [],//表格数据
      total: 0,
      pageNum: 1,
      pageSize: 10,

      // 申请信息弹窗===================
      popInformationShow: false,
      informationForm: {},
      // ===================申请信息弹窗

      // 房屋成员弹窗===================
      popMemberShow: false,
      popMemberData: [],
      // ===================房屋成员弹窗

      // 驳回申请弹窗===================
      popRejectShow: false,
      popRejectForm: {},
      popRejectRules: {
        desc: [
          { required: true, message: '请输入驳回原因', trigger: 'blur' },
        ],
      },
      activeRow: {},
      // ===================驳回申请弹窗
    };
  },
  async activated() {
    this.activeType = '0'
    this.reset()

    // 获取民族数据
    let res = await this.$api.system.myGetNationList()
    if (res.code == 200) {
      this.nationOptionData = res.data;
    } else {
      this.$message.error(res.message)
    }
  },

  methods: {
    handleClick(tab, event) {
      this.getTableList()
    },
    // 表格主要按钮================================
    async applyFor(row) { //申请信息
      this.popInformationShow = true
      let res = await this.$api.car.myGetApprovalInfo(row.id)
      if (res.code == 200) {
        this.informationForm = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async member(row) { //房屋成员
      this.popMemberShow = true
      let res = await this.$api.car.myGetCustomerListInRoom(row.id)
      if (res.code == 200) {
        if (res.data[0]) {
          this.popMemberData = res.data
        }
      } else {
        this.$message.error(res.message)
      }
    },
    async agreeWith(row) { //同意
      console.log(row);
      // if (!row.isApprover) {
      //   this.$message.error('没有审批权限')
      //   return
      // }

      this.$confirm('是否同意审批?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.car.myCustomerRoomApprovalApproval({
          "id": row.id, //审批信息的id
          "status": 1, //审批状态 默认0:待审批 1:审批通过 2:审批驳回 3:取消申请 4:业主邀请 
          "rejectReason": "" //非必填 拒绝原因
        })
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '审批通过!'
          });
          this.activeType = '0'
          this.getTableList()
        } else {
          this.$message.error(res.message)
        }

      }).catch(() => {

      });


    },
    async reject(row) { //驳回
      // if (!row.isApprover) {
      //   this.$message.error('没有审批权限')
      //   return
      // }
      this.activeRow = row
      this.popRejectShow = true
      this.$set(this.popRejectForm, 'desc', '')
      this.$nextTick(() => {
        this.$refs.popReject.clearValidate()
      })
    },
    rejectOk() { //驳回弹出确认事件
      this.$confirm('是否驳回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.car.myCustomerRoomApprovalApproval({
          "id": this.activeRow.id, //审批信息的id
          "status": 2, //审批状态 默认0:待审批 1:审批通过 2:审批驳回 3:取消申请 4:业主邀请 
          "rejectReason": this.popRejectForm.desc //非必填 拒绝原因
        })
        if (res.code == 200) {
          this.popRejectShow = false
          this.activeType = '0'
          this.$message({
            type: 'success',
            message: '已驳回!'
          });
          this.getTableList()
        } else {
          this.$message.error(res.message)
        }

      }).catch(() => {

      });
    },
    // =====================================表格主要按钮

    reset() {
      this.pageNum = 1
      this.keyAccount = ''
      this.keyName = ''
      this.keyRoomName = ''
      this.getTableList()
    },
    PageChange(e) {//分页器——页数变化
      this.pageNum = e
      this.getTableList()
    },
    pageSizeChange(e) { //分页器——每页数量变化
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    SouSuo() {
      this.pageNum = 1
      this.getTableList()
    },
    async getTableList() {
      let res = await this.$api.car.myCustomerRoomApprovalList({
        "pageNum": this.pageNum,
        "pageSize": this.pageSize,
        "customerType": '', // 住户类型 1:业主 2:亲友 3:租户
        "status": this.activeType, // 审批状态 默认0:待审批 1:审批通过 2:审批驳回 3:取消申请 4:业主邀请
        "account": this.keyAccount, //用户账号
        "userName": this.keyName, //用户姓名
        "rqName": this.keyRoomName//小区名称
      })
      if (res.code == 200) {
        if (res.data.list.length < 1 && this.pageNum != 1) { //判断，当搜索关键字有内容时，我直接点击分页，会造成关键词列表中没有某某页的数据，那么我就用第一页重新请求一次
          this.pageNum = 1
          this.getTableList()
          return
        }
        this.total = res.data.total
        this.tableData = res.data.list
      } else {
        this.$message.error(res.message)
      }


    }
  },
};
</script>
<style scoped lang="less">
.dialogStyle {
  /deep/ .el-dialog {
    border-radius: 20px;

    .el-dialog__body {
      padding: 0 20px;

      .el-divider {
        margin: 20px 0;
      }
    }
  }

  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
}

.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}
</style>